<template>
    <view class="container">
        <u-sticky>
            <view class="header">
                <view class="search">
                    <u-search placeholder="请输入产品" v-model="keyword" :showAction="false" bgColor="#f7f8fa" @search="onRefresh"></u-search>
                </view>
            </view>
        </u-sticky>

        <!-- refresher-triggered 当前下拉刷新的状态
        refresher-enabled 开启下拉刷新
        refresherrefresh 下拉刷新的事件
        scroll 触发滚动
        scrolltolower 上拉加载 -->
        <scroll-view 
            v-if="ProductList.length > 0"
            class="list" 
            :scroll-y="true" 
            :scroll-top="top"
            :refresher-triggered="refresh" 
            :refresher-enabled="true" 
            :lower-threshold="100"
            @scroll="OnScroll"
            @refresherrefresh="onRefresh" 
            @scrolltolower="scrollTolower"
            :style="{ height: `${height}px` }"
        >

            <navigator :url="`/pages/validate/info?code=${item.query_code}`" class="item" v-for="(item, key) in ProductList" :key="key">
                <view class="title">{{ item.product_product.name }}</view>

				<view class="line"></view>

				<view class="son-list">
					<view class="son-item">
						<view class="name"> 查询次数： </view>
						<view class="value">{{ item.query_num_text }}</view>
					</view>

					<view class="son-item">
						<view class="name"> 您查询的防伪码： </view>
						<view class="value">{{ item.query_code }}</view>
					</view>

					<view class="son-item">
						<view class="name"> 首次查询时间： </view>
						<view class="value">{{ item.query_time_text }}</view>
					</view>

					<view class="son-item">
						<view class="name"> 小程序码： </view>
						<view class="value">
							<image src="/static/images/code.png" />
						</view>
					</view>
				</view>
            </navigator>

            <u-loadmore :status="status" marginBottom="40" fontSize="20" lineColor="#1CD29B" dashed line />
        </scroll-view>

        <!-- 提醒组件 -->
		<u-toast ref="notice"></u-toast>

        <!-- 返回顶部 -->
		<u-back-top :scroll-top="top" @click="top = 0"></u-back-top>
    </view>
</template>
<script>
export default{
    async onShow()
    {
        let token = uni.getStorageSync('token') ? uni.getStorageSync('token'): ''
        if(token){
            var result = await uni.$u.http.post('/business/Check', {token})
            this.business = result.data
        }
        //获取本地存储
        // this.business = uni.getStorageSync('business') ? uni.getStorageSync('business'): {}

        if(Object.keys(this.business).length > 0)
        {
            //有登录
            this.onRefresh()
        }else
        {
            //没有登录
        }
    },
    onReady()
    {
        //调用uni接口 获取页面的高度
        uni.getSystemInfo(
        {
            success: res =>
            {
                this.height = res.windowHeight;
            },
        });
    },
    data() {
        return {
            refresh:false,// 下拉刷新状态
            finished:false,// 上拉加载状态
			Isfreshing: false, //防止重复刷新
            ProductList:[],
            page:1,
            limit:10,
            business:{},
            status:'loadmore',
            keyword:'',
            height: 0, //页面高度
            top: 0,
        }
    },
    methods:{
        onRefresh()  //下拉刷新
        {
            //下拉刷新
            //防止重复下拉刷新
            if (this.Isfreshing) return;

            //执行一次下拉刷新
            this.Isfreshing = true;

            //判断是否处于下拉刷新中
            if (!this.refresh) this.refresh = true; //正在下拉刷新中

            this.page = 1;
            this.ProductList = [];


            //请求列表
            this.ProductData()
        },
        scrollTolower() //上拉加载
        {
            //请求列表
            this.ProductData()
        },
        OnScroll(e) //滚动改变top值
        {
            this.top = e.detail.scrollTop;
        },
        async ProductData() //产品列表数据请求
        {
            var busid = this.business.id ? this.business.id : 0

            var result = await uni.$u.http.post('business/ProductIndex', {
                page: this.page,
                pageSize: 6,
                keyword: this.keyword,
                busid
            })

            if (this.refresh) this.refresh = false;
            if (this.Isfreshing) this.Isfreshing = false;
            this.status = "loadmore";
            this.ProductList = this.ProductList.concat(result.data);
            this.page++;

            if(result.last_page == result.current_page)
            {
                //没有更多数据
                this.status = "nomore";
                return false;
            }

        }
        
        
    }
}
</script>

<style>
page{
    background-color: #eee;
}

.container{
    width: 95%;
    margin: 0 auto;
}

.header{
    background-color: #fff;
    padding: 10px 0;
    margin-top: 10px;
    border-radius: 10px;
}

.header .search{
    width: 95%;
    margin: 0 auto;
}

.item{
    background:#fff;
    border-radius: 10px;
    overflow:hidden;
    margin-top:10px;
    padding:0 10px 10px;
}

.item .title{
    padding:10px 0 10px 10px;
    font-size: 20px;
}

.item .line{
    width:100%;
    height:1px;
    background:#ebebeb;
    margin:0 auto;
    margin-bottom:10px;
}

.item .son-list .son-item{
    display:flex;
    justify-content:space-between;
    font-size:14px;
    margin-bottom:10px;
}

.item .son-list .son-item .name{
    color:#9b9b9a;
}

.item .son-list .son-item image{
    width: 30px;
    height: 30px;
}
</style>